<template>
    <div>
        <div class="head">订单发货 </div><br>
        <div class="tbody">
            快递单号导入
            <!-- ----------------------------表单------------------------------------- -->
            <el-form ref="form" :model="form" label-width="150px">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="选择订单ID">
                                <el-select v-model="form.order" placeholder="请选择订单ID" style="width:90%">
                                    <el-option v-for="(item) in stateOrder" :key="item.id" :label="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="选择快递公司">
                                <el-select v-model="form.company" placeholder="请选择快递公司" style="width:90%">
                                    <el-option v-for="(item) in stateCompany" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-form-item label="快递单号">
                    <el-input v-model="form.number" style="width:96%" placeholder="请输入快递单号"></el-input>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc" style="width:96%;" resize=none maxlength="200"
                        :autosize="{ minRows: 4, maxRows: 10 }" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Update">立即添加</el-button>
                    <el-button @click="resert">取消</el-button>
                    <download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" header="订单信息表"
                        name="订单信息表.xls">
                        <el-button type="success">导出</el-button>
                    </download-excel>
                </el-form-item>
            </el-form>
            <!-- ----------------------------表格------------------------------------- -->
            <el-table :data="tableData" border style="width: 97%" :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }">
                <!-- 动态添加表格列  -->
                <el-table-column v-for="(item, index) in column" :key="index" :label="item.label" :prop="item.prop">
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
import api from "../../api/index";
import { Update } from "../../api/modules/reply";
export default {
    name: 'replyOrder',
    data() {
        return {
            json_fields: {
                "商品ID": 'id',
                "商品名称": 'name',
                "快递单号": 'num',
                "快递公司": 'company',
                "备注": 'desc'
            },
            //动态添加表格项column
            column: [
                {
                    label: '商品ID',
                    prop: 'id'
                },
                {
                    label: '商品名称',
                    prop: 'name'
                },
                {
                    label: '快递单号',
                    prop: 'num'
                },

                {
                    label: '快递公司',
                    prop: 'company'
                },
                {
                    label: '备注',
                    prop: 'desc'
                },
            ],
            stateOrder: [],//订单选择
            form: {
                number: undefined,
                company: undefined,
                order: undefined,
                desc: undefined
            },
            tableData: [],//表格显示数据
            stateCompany: [
                {
                    value: '顺丰',
                    label: '顺丰'
                },
                {
                    value: '京东',
                    label: '京东'
                }],//状态配置项

        }
    },
    methods: {
        //点击立即添加按钮
        Update() {
            const form = this.form;
            for (const [index, item] of this.tableData.entries()) {
                if (item.id == form.order) {
                    var data = {
                        num: form.number,
                        company: form.company,
                        desc: form.desc,
                    }  //需要传输的方式
                    Update('replyOrder', item, data)
                        .then(res => {
                            this.init();
                            this.formClear('form', this.form);
                            this.form.order = undefined;
                            window.location.reload();
                        }).catch(err => {
                            console.log(err);
                        })
                    break
                }
            }
        },
        //点击重置按钮
        resert() {
            //清空为默认值
            this.formClear('form', this.form);
            //状态也初始化
            this.form.order = undefined;
            this.form.company = undefined;
        },
        //数据初始化
        init() {
            return new Promise(reslove => {
                api.reply.getReplyOrderData().then((res) => {
                    let { data } = res;
                    reslove(data);
                })
            })
        },

    },
    //页面创建获取数据渲染
    async created() {
        this.tableData = await this.init()
        this.stateOrder = await this.init();

    },
};
</script>

<style scoped sass='scss'>
.head {
    height: 70px;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    font-size: larger;

}

.tbody {
    /* height: 100vh; */
    background: white;
    border-radius: 4px;
    padding-left: 50px;
    font-size: larger;
    padding-top: 30px;

}

::v-deep .el-form-item__content {
    display: flex;

}

::v-deep .el-button+.el-button {
    margin: 0 30px 0 30px !important;
}
</style>